<template>
  <div class="container">
    <h1 class="tip">确认挂号信息</h1>
    <!-- 卡片：展示就诊人信息 -->
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>选择就诊人</span>
          <el-button type="primary" :icon="User" size="default" @click="goUser">添加就诊人</el-button>
        </div>
      </template>
      <div class="user">
        <Visitor
          @click="changeIndex(index)"
          v-for="(user,index) in userArr"
          :key="user.id"
          class="item"
          :user="user"
          :index="index"
          :currentIndex="currentIndex"
        ></Visitor>
      </div>
    </el-card>
    <!-- 卡片：展示医生的信息 -->
    <el-card class="box-card">
      <!-- 卡片的头部 -->
      <template #header>
        <div class="card-header">
          <span>挂号信息</span>
        </div>
      </template>
      <!-- 卡片的身体部分:展示医生的信息 -->
      <el-descriptions class="margin-top" :column="2" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊日期:</div>
          </template>
          {{docInfo?.workDate}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊医院：</div>
          </template>
          {{docInfo.param?.hosname}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊科室：</div>
          </template>
          {{docInfo.param?.depname}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生姓名：</div>
          </template>
          {{docInfo?.docname}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生职称：</div>
          </template>
          {{docInfo?.title}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生专长：</div>
          </template>
          {{docInfo?.skill}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">挂号费：</div>
          </template>
          {{docInfo?.amount}}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <!-- 确定挂号按钮 -->
    <div class="btn">
      <el-button
        type="primary"
        size="default"
        :disabled="currentIndex==-1"
        @click="submitOrder"
      >确认挂号</el-button>
    </div>
  </div>
</template>
  
<script lang="ts" setup>
// @ts-ignore
import { onMounted, ref } from "vue";
import { User } from "@element-plus/icons-vue";
// @ts-ignore
import { reqGetUser,reqDoctorInfo } from "@/api/hospital";
// @ts-ignore 
import { reqSubmitOrder } from "@/api/user"
// @ts-ignore
import { SubmitOrder } from "@/api/user/type"
// @ts-ignore
import type {UserResponseData,UserArr,DoctorInfoData,Doctor} from "@/api/hospital/type"
// 添加就诊人信息组件
// @ts-ignore
// import Visitor from "./visitor.vue";
import {useRoute,useRouter} from "vue-router"
import { ElMessage } from 'element-plus'
let route=useRoute()
let router=useRouter()
let userArr=ref<UserArr>([])
let docInfo=ref<any>({})
// 存储用户确定就诊人的索引值
let currentIndex=ref<number>(-1)
// 获取就诊人信息
const fetchUserData = async () => {
  let result:UserResponseData=await reqGetUser();
  if(result.code==200){
    userArr.value=result.data
  }
};
// 获取医生信息
const fetchInfo=async()=>{
  const result:DoctorInfoData=await reqDoctorInfo(route.query.docId as string)
  if(result.code==200){
    docInfo.value=result.data
  }
}
// 组件挂载完毕获取相应的数据
onMounted(() => {
  fetchUserData();
  fetchInfo()
});
// 点击就诊人子组件的回调
const changeIndex=(index:number)=>{
  currentIndex.value=index
}
// 确认挂号
const submitOrder=async()=>{
  let hoscode=docInfo.value.hoscode
  let scheduleId=docInfo.value.id
  let patientId=userArr.value[currentIndex.value].id
  let result=await reqSubmitOrder(hoscode,scheduleId,patientId)
  if(result.code==200){
    router.push({path:'/user/order',query:{orderId:result.data}})
  }else{
    ElMessage({
      message: result.message,
      type: 'error',
    })
  }
}
// 添加就诊人的方法
const goUser=()=>{
  router.push({path:'/user/patient',query:{type:'add'}})
}
</script>
  
<style lang="scss" scoped>
.container {
  margin-bottom: 40px;
  margin-top: 48px;
  .tip {
    font-weight: 900;
    color: #333;
    font-size: 16px;
  }
  .box-card {
    margin-top: 40px;
    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .user {
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 32%;
        margin: 10px 5px;
      }
    }
  }
  .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom:100px;
  }
}
</style>
  